<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">腾飞健康</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-this"><a href="javascript:;" id="uncharge">未缴费</a></li>
            <li class="layui-nav-item"><a href="javascript:;" id="charged">已缴费</a></li>
            <li class="layui-nav-item"><a href="javascript:;" id="all">所有用户</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" name="goBackIndex">返回首页</a></li>
        </ul>
    </div>

    <div id="allUser" style="padding: 10px">
        <div class="layui-row">
            <div class="layui-input-inline layui-col-md5">
                <input class="layui-input " placeholder="模糊搜索" autocomplete="off" name="searchAllUserChargeMsgInput"
                       id="searchAllUserChargeMsgInput" maxlength="18">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" lay-filter="search" id="searchAllUser">搜索</button>
            </div>
        </div>
        <!--数据表格-->
        <table id="userChargeMsgTable" lay-filter="userChargeMsgTable"></table>
    </div>

</div>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    layui.use(["jquery", "element", "table"], function () {
        let $ = layui.jquery;
        let element = layui.element;
        let table = layui.table;

        //标记显示的是那种模式的table
        let tableType=1;


        let userChargeMsgTable = table.render({
            elem: "#userChargeMsgTable",
            id: "userChargeMsgTableId",
            url: "/getAllUserChargeMsgList",
            limit: 5,
            limits: [5, 10, 15],
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            method: "post",
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg"
            },
            where: {
                tableType: tableType
            },
            cols: [
                [
                    {field: "id", title: "id", align: "center", hide: true},
                    {field: "userIdentity", title: "身份证号", width: 170, sort: true, id: "examinerId", align: "center"},
                    {field: "userName", title: "姓名", width: 120, align: "center"},
                    {field: "examinerName", title: "挂号员", width: 120, align: "center"},
                    {field: "examineDate", title: "挂号日期", width: 120, align: "center"},
                    {field: "examinePackageName", title: "套餐", width: 120, align: "center"},
                    {field: "examinePackagePrice", title: "套餐价格", width: 100, align: "center"},
                    {field: "examineItemPrice", title: "额外项目总价格", width: 120, align: "center"},
                    {field: "totalPrice", title: "应付款额", width: 120, align: "center"},
                    {field: "status", title: "缴费状态", width: 120, align: "center", templet: "#statusTpl"},
                    {title: "操作", align: "center", templet: "#operationTple"}
                ]
            ],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        //给table栏目按钮绑定事件
        table.on("tool(userChargeMsgTable)", function(obj){
            let data=obj.data; //当前行数据
            switch (obj.event) {
                case "detail":
                    layer.msg("detail");
                    detail(data.id);
                    break;
                case "charge":
                    charge(data.id, data.totalPrice);
                    break;
                case "refund":
                    layer.msg("refund");
                    refund(data.id);
                    break;
            }
        });

        //缴费按钮事件
        function charge(id, totalPrice){
            console.log("totalPrice:"+totalPrice);
            layer.open({
                type: 1,
                title: false,//不显示标题栏
                closeBtn: false,
                area: '300px; 200px',
                shade: 0.8,
                id: 'LAY_layuipro', //设定一个id，防止重复弹出
                btn: ['确认付款'],
                btnAlign: 'c',
                moveType: 1, //拖拽模式，0或者1
                content: '<div style="padding-top：10px; padding-bottom: 10px; text-align:center; padding-top: 20px">共需缴费<span style="color: red">'+totalPrice+'</span>元！</div>',
                yes: function (index, layero) {
                    layer.close(index);
                    $.ajax({
                        url: "/handleChargeOperate",
                        dataType: "json",
                        type: "post",
                        data: "id="+id,
                        async: true,
                        success: function (resposneResult) {
                            console.log(resposneResult.msg);
                            layer.msg(resposneResult.msg, {
                                icon: 1,
                                time: 1000
                            });
                            table.reload("userChargeMsgTableId", {
                                url: "/getAllUserChargeMsgList",
                                method: "get",
                            });
                        },
                        error: function () {
                            console.log("处理缴费请求失败！")
                        }
                    });
                },
            });
        };

        //明细按钮事件
        function detail(id){

        }

        //退款按钮事件
        function refund(id){

        }

        //模糊搜索方法
        $("#searchAllUser").on("click", function (data) {
            let searchAllUserChargeMsgInput = $("#searchAllUserChargeMsgInput");
            console.log("ceshi");
            table.reload("userChargeMsgTableId", {
                page: {
                    curr: 1
                },
                where: {
                    searchAllUserChargeMsgInput: searchAllUserChargeMsgInput.val(),
                    tableType: tableType
                },
                url: "/fuzzySearchAllUserChargeMsgList",
                method: "get",
            });
        });

        $("#all").on("click", function(){
            tableType=3;
            table.reload("userChargeMsgTableId", {
                page: {
                    curr: 1
                },
                where: {
                    tableType: tableType
                },
                url: "/getAllUserChargeMsgList",
                method: "get",
            });
        });
        $("#uncharge").on("click", function(){
            tableType=1;
            table.reload("userChargeMsgTableId", {
                page: {
                    curr: 1
                },
                where: {
                    tableType: tableType
                },
                url: "/getAllUserChargeMsgList",
                method: "get",
            });
        });
        $("#charged").on("click", function(){
            tableType=2;
            table.reload("userChargeMsgTableId", {
                page: {
                    curr: 1
                },
                where: {
                    tableType: tableType
                },
                url: "/getAllUserChargeMsgList",
                method: "get",
            });
        });

        //返回首页index.html
        $("a[name=goBackIndex]").on("click", function () {
            window.open("/unitIndex", "_top");
        });
    });

</script>
<!-- 已缴费|未缴费显示模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(!d.chargeStatus){ }}
    <span style="color: red">未缴费</span>
    {{#  } }}
    {{#  if(d.chargeStatus){ }}
    <span style="color: green">已缴费</span>
    {{# } }}
</script>
<!-- 缴费|退款模板 -->
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"
              style="padding-right: 5px;margin-right: 5px">明细</span>
        {{# if(!d.chargeStatus){ }}
        <span class="layui-btn layui-btn-xs layui-btn-xs" lay-event="charge"
              style="padding-right: 5px;margin-right: 5px">缴费</span>
        {{# } }}
        {{# if(d.chargeStatus){ }}
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refund"
              style="padding-right: 5px;margin-right: 5px">退款</span>
        {{# } }}


    </div>
</script>
</body>
</html>